<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue移动端项目实战</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        html,
        body,
        #app {
            height: 100%;
        }

        .box {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .title {
            margin: 0;
            margin-bottom: 10px;
            height: 50px;
            line-height: 50px;
            background-color: #fff;
            text-align: center;
        }

        a {
            background-color: #fff;
            text-decoration: none;
            padding: 5px 10px;
            margin: 5px;
            box-sizing: border-box; 
            display: flex;
            align-items: center;
        }

        .fix {
            height: 0;
            padding: 0;
        }
        .el-menu {height: 100%;}
        .el-menu-item, .el-submenu__title{height: 30px;line-height: 30px;}
    </style>
</head>

<body>
    <div id="app">
        <el-header style="text-align: center; font-size: 16px">
            {{!moduleName?'天天生鲜视频列表':moduleName+'模块'}}
        </el-header>
        <el-container style="height: 100%; border: 1px solid #eee">
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-menu :uniqueOpened="true">
                    <el-menu-item @click="tableData=item.children;moduleName=item.name;" v-for="(item,index) in list" :key="index"
                        :key="index">[{{index+1}}] {{item.name}}</el-menu-item>
                </el-menu>
            </el-aside>

            <el-container>
                

                <el-main>
                    <el-row v-for="(item,index) in tableData">
                        <div class="box">
                            <a :href="baseUrl+item" target="_blank">
                                <span>{{index+1}}.{{f(item)}}</span>
                            </a>
                        </div> 
                    </el-row>
                </el-main>
            </el-container>
        </el-container>
    </div>

    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
    </style>

    <script>
        new Vue({
            el: '#app', 
            methods: {
                f(item){ 
                    console.log(item);
                    let index = item.indexOf(this.moduleName); 
                    return item.slice(index);
                }
            },
            data: {
                baseUrl:'http://r0123blzj.hn-bkt.clouddn.com/',
                tableData: [],
                moduleName:'',
                list:[{"name":"创建项目","children":["01.1-创建项目-用vue-cli创建项目.mp4","01.2-创建项目-项目结构.mp4"]},{"name":"其他","children":["02-其他-组件.mp4","06.3-其他-demo组件.mp4","14.-其他-全局注册组件.mp4","20-其他-弹性盒子排列问题.mp4","22.4-其他-计算属性.mp4","22.5-其他-观擦watch.mp4","23.8-其他-浏览器本地存储.mp4","24.1-其他-token和session介绍.mp4","24.2-其他-token在项目中的应用.mp4","24.3-其他-vue过滤器.mp4","24.16-其他-拦截器添加登录跳转.mp4"]},{"name":"es6模块","children":["03.1-es6模块-export导出.mp4","03.2-es6模块-export default导出.mp4","03.3-es6模块-重命名.mp4"]},{"name":"配置","children":["04.1-配置-禁用eslint.mp4","04.2-配置-添加less支持.MP4","12-配置-axios拦截器.mp4","21-配置-vue devtool.MP4"]},{"name":"vue路由","children":["05.1-vue路由-模块分配.mp4","05.2-vue路由-路由配置.mp4","05.3-vue路由-路由配置(重讲).mp4","05.4-vue路由-子路由配置.mp4","05.5-vue路由-所有路由配置.mp4","07-vue路由-子路由配置.mp4","08-vue路由-activeclass.mp4","09-vue路由-路由history模式.mp4","16.1-vue路由-通过params传参.mp4","16.2-vue路由-通过query传参.mp4","16.3-vue路由-动态路由传参.mp4"]},{"name":"VantUI","children":["06.1-VantUI-vant介绍和安装.mp4","06.2-VantUI-底部制作.mp4","15.5-VantUI-使用ui组件三要素.mp4"]},{"name":"父子组件通信","children":["10.1-父子组件通信-父传子-普通属性.mp4","10.2-父子组件通信-父传子-绑定属性.mp4","10.3-父子组件通信-父传子-实践.mp4","11.1-父子组件通信-子传父.mp4"]},{"name":"首页","children":["13.1-首页-渲染列表.mp4","13.2-首页-吸顶.mp4","18.1-首页-准备工作.mp4","18.2-首页-发请求获取商品列表.mp4","18.3-首页-渲染商品列表.mp4","18.4.1-首页-轮播图-定义变量-请求数据.mp4","18.4.2-首页-使用轮播图组件.mp4","18.5-首页-添加吸顶效果.mp4"]},{"name":"插槽slot","children":["15.1-插槽slot-普通插槽.mp4","15.2-插槽slot-具名插槽.mp4","15.3-插槽slot-有赞ui组件插槽的使用.mp4","15.4-插槽slot-自定义导航栏组件.mp4"]},{"name":"商品详情","children":["17-商品详情-商品详情页面(总).mp4","19.1-商品详情-路由跳转传参.mp4","19.2-商品详情-获取数据.mp4","19.3-商品详情-轮播图渲染.mp4","19.4-商品详情-渲染商品介绍和商品图片.mp4","19.5-商品详情-添加到购物车.mp4"]},{"name":"登录","children":["22.1-登录-获取验证和登录.mp4","22.2-登录-验证码手机号码和验证码.mp4","22.3-登录-验证码倒计时.mp4"]},{"name":"vuex","children":["23.1-vuex-vuex介绍.mp4","23.2-vuex-创建仓库.mp4","23.3-vuex-定义状态.mp4","23.4-vuex-获取状态.mp4","23.5-vuex-修改状态.mp4","23.6-vuex-在项目中使用vuex.mp4","23.7-vuex-退出登录.mp4","23.9-vuex-vuex持久化.mp4","23.10-vuex-vuex的五个核心概念.mp4","23.11-vuex-派生状态gettters.mp4","23.12-vuex-action异步修改状态.mp4","23.13-vuex-模块化.mp4"]},{"name":"购物车","children":["24.1-购物车-功能需求.mp4","24.2-购物车-渲染列表.mp4","24.4-购物车-编辑功能.mp4","24.5-购物车-步进demo.mp4","24.6-购物车-步进器修改数量.mp4","24.7-购物车-步进器总结.mp4","24.8-购物车-单选功能.mp4","24.9-购物车-计算总价.mp4","24.10-购物车-全选.mp4","24.11-购物车-单选全选联动.mp4","24.12-购物车-全选单选总结.mp4","24.13-购物车-删除和结算事件.mp4","24.14-购物车-删除操作.mp4","24.15-购物车-确认弹窗和提示.mp4","24.17-购物车-空提示.mp4","24.18-购物车-结算.mp4"]}]

            }
        })
    </script>
</body>
</html>